<template>
  <div class="tech01">
    <h2>name2 = {{ name2 }} age2 = {{ age2 }}</h2>
    <label for="">name
      <input v-model="name" type="text" />
    </label>
    <div>
      <h2>person = {{ person }}</h2>
      <label for="">person.age
        <input v-model="person.age" type="text" />
      </label>
      <br>
      <label for="">pAge
        <input v-model="pAge" type="text" />
      </label>
      <br>
      <label for="">sex
        <input v-model="sex" type="text" />
      </label>

    </div>
  </div>
</template>

<script >

import { ref, reactive, toRef, toRefs } from "vue";

export default {
  name: "TechToRef",
  setup() {

    //#region
    let name2 = ref('张三')
    // let name = '张三'
    let age2 = ref(18)

    let person = reactive({
      name: "王五",
      age: 20,
      sex: "男",
    })

    toRef(person, 'sex');
    return {
      name2,
      age2,
      person,
      sex: toRef(person, 'sex'),
      pAge: person.age,
      ...toRefs(person)
    }
  }
}
</script>

<style scoped>
@media (min-width: 1024px) {
  .tech01 {
    min-height: 100vh;
    align-items: center;
  }
}
</style>
